<template>
	<div id="realTime">
		<v-head></v-head>
		<v-left></v-left>
		<div class="list">
			<div class="body">
				<div class="showbox showbox_1">
					<span>{{runDis}}</span>
					<img src="../../../static/img/341.png">
					<span>今日跑步总里程（公里）</span>
				</div>
				<div class="showbox showbox_2">
					<span>{{avgDis}}</span>
					<img src="../../..//static/img/342.png">
					<span>今日人均跑步里程（公里）</span>
				</div>
				<div class="showbox showbox_3">
					<span>{{runNum}}</span>
					<img src="../../../static/img/340.png">
					<span>今日跑步人数</span>
				</div>
				<div class="showbox showbox_4">
					<span>{{registNum}}</span>
					<img src="../../../static/img/339.png">
					<span>累计注册人数</span>
				</div>
			</div>
			<div id="box">
				<div class="tubiao-title">各时段运动人数
					<el-date-picker v-model="time" format="yyyy/MM/dd" placeholder="yyyy/MM/dd" class="qizhiDate" @change='lineChart()'></el-date-picker>
				</div>
				<div id="chart">
					<vue-highcharts :options="options" ref="lineCharts"></vue-highcharts>
					<div class="nopeisu" v-if="showInfo">当天无数据</div>
				</div>
			</div>
		</div>
		<v-footer></v-footer>
	</div>
</template>

<script>
	import { mapState, mapActions } from "vuex";
	import vHead from "../common/Header.vue";
	import vFooter from "../common/Footer.vue";
	import vLeft from "./leftSide.vue";

	export default {
		data() {
			return {
				runDis: "",
				showInfo: false,
				avgDis: "",
				runNum: "",
				registNum: "",
				time: new Date(),
				options: {
					chart: {
						type: "line"
					},
					title: {
						text: ""
					},
					credits: {
						enabled: false
					},
					subtitle: {
						text: "单位:人",
						align: "left"
					},
					xAxis: {
						title: {
							text: "单位：时刻",
							align: "high"
						},
						allowDecimals: false,
						categories: [
							"00",
							"01",
							"02",
							"03",
							"04",
							"05",
							"06",
							"07",
							"08",
							"09",
							"10",
							"11",
							"12",
							"13",
							"14",
							"15",
							"16",
							"17",
							"18",
							"19",
							"20",
							"21",
							"22",
							"23"
						],
						lineColor: "#e6e6e6" //基线颜色
					},
					yAxis: {
						title: {
							text: ""
						},
						gridLineWidth: "1",
						min: 0,
						tickAmount: 6,
						tickPixelInterval: 60,
						tickPositions: [100, 200, 300, 400, 500],
						gridLineDashStyle: "solid",
						labels: {
							style: {
								color: "#81868a" //纵坐标刻度文字的颜色
							}
						}
					},
					tooltip: {
						headerFormat: "{point.key}:  ",
						pointFormat: "{point.y}人",
						style: {
							//display:'none'
						}
					},
					plotOptions: {
						series: {
							states: {
								click: {
									enabled: false
								}
							}
						}
					},
					series: [],
					legend: {
						enabled: false //让下面的series name 不显示
					}
				}
			};
		},
		components: {
			vHead,
			vFooter,
			vLeft
		},
		mounted() {
			let sections = document.getElementById("section_box").children;
			let logo_left = document.getElementsByClassName("logo-left")[0];
			let header = document.getElementById('header');
			let random = document.querySelector(".random");
			logo_left.style.background = "#fff";
			random.style.boxShadow = "0px 0px 0px 0px rgba(0, 0, 0, 0.5)";
			header.style.boxShadow = "0px 1px 4px 0px rgba(0, 0, 0, 0.5)";
			sections[0].className = "item_active";
			document.getElementsByClassName('head_img')[0].src = "../../../static/img/dataAnalysis_icon_blue.png";
			this.getSummery();
			this.lineChart();
		},
		computed: mapState({ user: state => state.user }),
		methods: {
			// 获取概要
			getSummery() {
				let url = this.$util.domain + "/dataPlatForm/general/realTime/summary";

				this.$http({
					url,
					method: "GET"
				}).then(response => {
					let summary = response.data.data;
					if (response.data.error == 10000) {
						this.runDis = summary.runDis;
						this.runNum = summary.runNum;
						this.avgDis = summary.avgDis;
						this.registNum = summary.registNum;
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			},
			//折线图
			lineChart() {
				let url = this.$util.domain + "/dataPlatForm/general/realTime/peopleNum";
				let dataArray = [];
				this.$http({
					url,
					method: "GET",
					params: {
						date: this.time.format("yyyy/MM/dd")
					}
				}).then(response => {
					let dataList = response.data.data;
					let lineCharts = this.$refs.lineCharts;
					lineCharts.removeSeries();
					if (response.data.error == 10000) {
						let y_options = [];
						if (dataList.length > 0) {
							this.showInfo = false;
							dataList.forEach(item => {
								dataArray.push(item.runNum);
							});

							let max = Math.max.apply(null, dataArray);
							max = Math.ceil(max / 5);

							if (max < 10) {
								max = max;
							} else if (max < 100) {
								max = Math.ceil(max / 10) * 10;
							} else if (max < 1000) {
								max = Math.ceil(max / 100) * 100;
							} else if (max < 10000) {
								max = Math.ceil(max / 1000) * 1000;
							} else {
								max = Math.ceil(max / 10000) * 10000;
							}
							y_options = [0, max, 2 * max, 3 * max, 4 * max, 5 * max];

							lineCharts.getChart().yAxis[0].update({
								title: {
									text: ""
								},
								gridLineWidth: "1",
								min: 0,
								tickAmount: 6,
								tickPixelInterval: 60,
								tickPositions: y_options,
								gridLineDashStyle: "solid",
								labels: {
									style: {
										color: "#81868a" //纵坐标刻度文字的颜色
									}
								}
							});

							lineCharts.addSeries({
								data: dataArray,
								name: "",
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								lineColor: "#0cb88a",
								marker: {
									fillColor: "#0cb88a"
								},
								lineWidth: 1,
								type: "area",
								fillColor: {
									linearGradient: [0, 0, 0, 300],
									stops: [
										[0, '#0cb88a'],
										[1, 'rgba(12,184,138,0)']
									]
								}
							});
						} else {
							this.showInfo = true;
							y_options = [0, 10, 20, 30, 40, 50];

							lineCharts.getChart().yAxis[0].update({
								title: {
									text: ""
								},
								gridLineWidth: "1",
								min: 0,
								tickAmount: 6,
								tickPixelInterval: 60,
								tickPositions: y_options,
								gridLineDashStyle: "solid",
								labels: {
									style: {
										color: "#81868a" //纵坐标刻度文字的颜色
									}
								}
							});
							lineCharts.addSeries({
								data: [],
								name: "",
								events: {
									click: function (e) {
										e.preventDefault();
									}
								},
								lineColor: "#0cb88a",
								marker: {
									fillColor: "#0cb88a"
								}
							});
						}
					} else {
						this.$util.errorMsg(response.data.message);
					}
				});
			}
		}
	};
</script>

<style>
	#realTime {
		padding-bottom: 40px;
		height: calc(100% - 60px);
		background: #f0f3f4;
	}

	#realTime .list {
		width: calc(100% - 290px);
		margin-left: 220px;
		margin-top: 20px;
		height: calc(100% - 140px);
	}

	#realTime div.module:first-child {
		border-bottom: solid 4px #20a0ff;
	}

	#realTime div.module:first-child>.title {
		color: #20a0ff;
	}

	.tips {
		color: red;
		font-size: 12px;
	}

	#box {
		clear: both;
		margin-top: 10px;
	}

	#realTime .timeSelect {
		display: inline-block;
		margin-top: 15px;
	}

	.search {
		margin: 0 0 15px 0;
	}

	.infoBox {
		color: #333333;
		font-size: 12px;
		background-color: #f2f2f2;
		min-height: 40px;
		line-height: 40px;
		padding-left: 20px;
		margin-bottom: 15px;
	}

	#realTime .qizhiDate {
		float: right;
		font-size: 12px;
		border-radius: 0;
		margin-right: 34px;
		margin-top: 12px;
	}

	.body {
		min-height: 150px;
	}

	.showbox {
		float: left;
		height: 120px;
		width: calc((100% - 80px) / 4);
		min-width: 280px;
		border-radius: 2px;
		position: relative;
		margin-right: 20px;
		margin-top: 24px;
	}

	.showbox img {
		position: absolute;
		bottom: 20px;
		right: 10px;
	}

	.showbox span:first-child {
		font-family: "微软雅黑";
		font-weight: 500;
		font-size: 36px;
		height: 36px;
		line-height: 36px;
		color: #ffffff;
		position: absolute;
		left: 20px;
		top: 26px;
	}

	.showbox span:last-child {
		font-size: 14px;
		color: #fff;
		font-family: "微软雅黑";
		position: absolute;
		bottom: 20px;
		left: 20px;
	}

	.showbox_1 {
		background-color: #e84c3d;
	}

	.showbox_2 {
		background-color: #1abc9c;
	}

	.showbox_3 {
		background-color: #3598db;
	}

	.showbox_4 {
		background-color: #9a59b5;
	}

	.tubiao-title {
		height: 60px;
		line-height: 60px;
		font-size: 16px;
		color: #4d4d4d;
		background-color: #f6f6f6;
		padding-left: 20px;
	}

	.nopeisu {
		z-index: "10000";
		opacity: "1";
		position: absolute;
		color: #a0a0a0;
		top: 30%;
		left: 50%;
	}

	#chart {
		border: 1px solid #e6e6e6;
		position: relative;
	}
</style>